<template>
  <div class="login-form-container">
    <!-- 标题区域 -->
    <div class="form-title-wrapper">
      <el-text v-if="!changepass" tag="h2" class="form-title">忘记密码</el-text>
      <el-text v-else tag="h2" class="form-title">修改密码</el-text>
      <el-text class="form-subtitle">
        请重新设置密码进入平台！
      </el-text>
    </div>

    <!-- 表单区域 -->
    <el-form :model="form" ref="forgotRef" label-width="0px" class="login-form">
      <el-form-item prop="userName">
        <el-input v-model="form.userName" placeholder="请输入用户名" :prefix-icon="User" />
      </el-form-item>

      <el-form-item prop="passWord" :rules="[{ required: true, validator: validatePass, trigger: 'blur' },
      ]">
        <el-input v-model="form.passWord" show-password placeholder="请输入密码" :prefix-icon="Lock">

        </el-input>
      </el-form-item>

      <el-form-item prop="againPassWord" :rules="[
        { required: true, message: '请再次输入密码', trigger: 'blur' },
        { validator: validatePasswordMatch, trigger: 'blur' }
      ]">
        <el-input v-model="form.againPassWord" show-password placeholder="请再次输入密码" :prefix-icon="Lock">
        </el-input>
      </el-form-item>


      <el-form-item class="forgot-button-item">

        <el-button class="register-btn" type="default" @click="handleRegister">确认</el-button>
      </el-form-item>

      <el-form-item class="register-button-item">
        <div class="login-link-wrapper">
          <span class="login-link" @click="handleGoToLogin">登录</span>
        </div>
      </el-form-item>

    </el-form>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Grid, Lock, Notebook, User, View, Hide } from '@element-plus/icons-vue'
import { postforgotpass, postmodifypass } from '@/api'
import { validatePass } from "@/utils/validate"
import { useRouter, useRoute } from 'vue-router'
const router = useRouter();
const route = useRoute()

const changepass = ref(false)

const form = ref({
  userName: '',
  passWord: '',
  againPassWord: ''
})

const forgotRef = ref(null)

// 密码确认校验函数
const validatePasswordMatch = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value.length < 8 || value.length > 20) {
    callback(new Error('密码长度需为8~20位'))
  } else if (!/[a-z]/.test(value) || !/[A-Z]/.test(value)) {
    callback(new Error('密码必须包含大小写字母'))
  }

  if (value !== form.value.passWord) {
    callback(new Error('两次输入的密码不一致'))
  } else {
    callback()
  }
}

const handleGoToLogin = () => {
  forgotRef.value.resetFields()
  router.push('/logins')
}

const handleRegister = () => {
  // 校验两次输入的密码是否一致
  forgotRef.value.validate((valid) => {
    if (valid) {
      console.log('校验通过');
      if (changepass.value) {
        postmodifypass(form.value).then(res => {
          if (res.code === 200) {
            // ElMessage.success('修改成功')
            router.push('/logins')
            forgotRef.value.resetFields()
          }
        })
      } else {
        postforgotpass(form.value).then(res => {
          if (res.code === 200) {
            // ElMessage.success('修改成功')
            router.push('/logins')
            forgotRef.value.resetFields()
          }
        })
      }
    } else {
      console.log('校验失败');
    }
  });
}

onMounted(() => {
  changepass.value = route.query.changepass
})
</script>

<style scoped lang="less">
html,
body,
#app {
  height: 100%;
}

.login-form-container {
  height: 100%;
  width: 426px;
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.form-title-wrapper {
  margin-bottom: 62px;
}

.form-title {

  height: 42px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 600;
  font-size: 30px;
  color: #FFFFFF;
  line-height: 42px;
  text-align: left;
  font-style: normal;
}

.form-subtitle {
  width: 411px;
  height: 28px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 18px;
  color: #8692A6;
  line-height: 28px;
  text-align: left;
  font-style: normal;
  display: block;
  margin-top: 15px
}

.login-form :deep(.el-input__wrapper) {
  height: 64px;
  background-color: rgba(16, 23, 66, 0.6);
  border: 1px solid rgba(207, 224, 255, 0.46);
  border-radius: 4px;
  box-shadow: none;
}

.login-form :deep(.el-input__inner) {
  color: #ffffff; // 输入内容颜色
  font-size: 14px;
  font-family: '微软雅黑', sans-serif;
  background-color: transparent; // 避免内部再叠一层白底
}

.login-form :deep(.el-input__inner::placeholder) {
  color: rgba(255, 255, 255, 0.5); // placeholder 颜色（略淡）
  font-size: 14px;
  font-family: '微软雅黑', sans-serif;
}

.password-toggle-icon {
  font-size: 18px;
  color: #aaa;
  cursor: pointer;
  transition: color 0.2s ease;
}

.password-toggle-icon:hover {
  color: #409EFF;
}


.login-btn {
  width: 426px;
}


.forgot-button-item {
  margin-bottom: 20px !important;
}

.register-btn {
  width: 426px;
  height: 64px;
  background: #5871EB;
  border-radius: 4px;

  font-size: 16px;
  font-family: PingFangSC, PingFang SC;
  color: #ffffff;
  border: none !important;
}

.register-btn:hover {
  background-color: rgba(88, 113, 235, 0.65);
}

.login-link-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
}

.login-link {
  color: #8692A6;
  ;
  cursor: pointer;
  font-size: 16px;
  display: inline;
  transition: color 0.2s;

  &:hover {
    color: #66b1ff;
  }
}

.login-text-item {
  justify-content: center;
}

// 输入框之间的通用间距是 20px
.login-form :deep(.el-form-item) {
  margin-bottom: 50px;
}


.login-form :deep(.last-input-item) {
  margin-bottom: 50px;
}


.login-form :deep(.register-button-item) {
  margin-bottom: 10px;
}

:deep(.el-input__prefix) {
  font-size: 18px;
  color: #CFE0FF;
  margin-left: 4px; // 控制图标距离左边的距离
  margin-right: 4px; // 控制图标和文字的间距
}
</style>
